<template>
    <div class="choiceness bg">
        <div class="centers bg">
            <div v-show="cang" style="text-align: center; margin: 0; padding: 50px 0;">
                <p style="text-align: center;">
                    <img src="http://vvweb.gitee.io/qyg-front/static/img/is_empty.008b534a.png" alt="">

                </p>
                <div style="color: gray; text-align: center; margin: 0;">你的购物车空空如也</div>
            </div>
            <!-- <van-icon name="records" /> -->
            <div data-v-ead0a69e="" v-show="xian" class="abc bg" style="border-bottom:1px solid #F5F5F5; text-align: right;"
                @click="compile">
                <span>
                    <van-icon name="records" v-show="yixia" /> <i v-show="!yixia" data-v-ead0a69e=""
                        class="van-icon van-icon-success"><!----></i> <span data-v-ead0a69e="">{{ name }}<span
                            style="color: white;">12</span></span>
                </span>
            </div>
            <div class="cenadd bg" v-for="(item, index) in cartList" :key="index">
                <div class="add-left bg">
                    <van-checkbox @click="chuan(item)" v-model="item.checked" class="linhe bg"></van-checkbox>
                </div>
                <div class="add-center bg">
                    <div class="add-img bg">
                        <img :src="item.picUrl" alt="" width="88px" height="88px">
                    </div>
                    <div class="add-name bg">
                        <div style="font-size: 14px;">{{ item.goodsName }}</div>
                        <div><span style="font-size: 12px; border: 1px solid #969799; padding: 2px; color: gray;">{{
                            item.specifications[0]
                        }}</span></div>
                        <div data-v-ead0a69e="" class="van-card__bottom bg" style="padding: 30px 0;">
                            <div data-v-ead0a69e="" class="van-card__price bg">
                                <div data-v-ead0a69e=""><span data-v-ead0a69e=""
                                        class="van-card__price-currency bg">¥</span><span data-v-ead0a69e=""
                                        class="van-card__price-integer bg">{{ item.price }}</span>.<span data-v-ead0a69e=""
                                        class="van-card__price-decimal bg"></span></div>
                            </div>
                            <div data-v-ead0a69e="" class="van-card__num bg">x{{ item.number }}</div>
                        </div>
                    </div>
                    <div style="font-size: 12px; color: gray; text-align: right;">添加日期{{ item.updateTime }}</div>

                </div>
                <div class="add-right bg" v-show="show">
                    <div @click="delect(item)"
                        style="width: 100%; height: 77%; margin-top: 15px; text-align: center; color: white; background-color: #DB3D3C; line-height: 110px;">
                        删除
                    </div>
                </div>
            </div>
        </div>
        <div class="buttomss bg">
            <div data-v-ead0a69e="" class="van-submit-bar__bar bg">
                <div data-v-ead0a69e="" role="checkbox" tabindex="0" aria-checked="true" class="van-checkbox bg"
                    style="padding: 0px 10px;">
                    <div class=" bg" @click="quan"> <van-checkbox v-model="add"></van-checkbox></div><span
                        class="van-checkbox__label bg">全选</span>
                </div>
                <div data-v-ead0a69e="" class="van-submit-bar__text bg"><span data-v-ead0a69e="">总计</span><span
                        data-v-ead0a69e="" class="van-submit-bar__price bg">¥<span data-v-ead0a69e=""
                            class="van-submit-bar__price van-submit-bar__price--integer bg">{{ zong }}</span>.00</span>
                </div>
                <button @click="del" data-v-ead0a69e=""
                    class="van-button van-button--danger van-button--normal van-button--round van-submit-bar__button van-submit-bar__button--danger">
                    <div data-v-ead0a69e="" class="van-button__content"><span data-v-ead0a69e="" class="van-button__text">{{
                        listname }}</span></div>
                </button>
            </div>
        </div>
    </div>
</template>
<script>
import { cart, checkedss, delect, checkout } from '@/api/index'
import { Dialog, Toast } from 'vant';
export default {
    name: "trolley",
    data() {
        return {
            cartList: "",
            show: false,
            add: true,
            zong: "",
            cang: false,
            yixia: true,
            id: [],
            name: "编辑",
            listname: "结算",
            delects: [],
            xian: true
        }
    },
    methods: {
        // checked
        // productId
        del() {
            var a = this.cartList
            if (this.listname === "删除") {
                const dels = a.map((val, index, item) => val.productId)
                Dialog.confirm({
                    title: '确定删除所选商品吗',
                    message: "",
                })
                    .then(() => {
                        delect({ productIds: dels }).then(res => {
                            this.cartList = res.data.data.cartList
                            this.zong = res.data.data.cartTotal.checkedGoodsAmount
                            console.log(this.cartList)
                            if (this.cartList.length == 0) {
                                this.cang = true
                                this.yixia = false
                                this.xian = false
                                this.add = false
                                this.listname = "结算"
                            }
                        })
                    })

            } else if (this.listname === "结算") {
                if (a.length == 0) {
                    Toast('你的购物车为空');
                } else {
                    this.$router.push({
                        path: '/order',

                    })

                }
            }
        },
        delect(item) {
            Dialog.confirm({
                title: '确定删除所选商品吗',
                message: item.goodsName + " " + "  数量:x" + item.number,
            })
                .then(() => {
                    this.delects = []
                    this.delects.push(item.productId)
                    console.log(1)
                    delect({ productIds: this.delects }).then(res => {
                        console.log(res.data);
                        this.cartList = res.data.data.cartList
                        this.zong = res.data.data.cartTotal.checkedGoodsAmount
                        if (this.cartList.length == 0) {
                            this.cang = true
                            this.yixia = false
                            this.xian = false
                            this.add = false
                            this.listname = "结算"
                        }
                    })
                })
                .catch(() => {
                    // on cancel
                })
        },
        quan() {
            console.log(this.cartList.length == 0)
            if (this.cartList.length == 0) {
                // console.log("cartList")
                this.add = false
            } else {
                this.id = []
                for (let index = 0; index < this.cartList.length; index++) {
                    this.id.push(this.cartList[index].productId)
                }
                this.add = !this.add
                checkedss({ productIds: this.id, isChecked: this.add }).then(res => {
                    this.cartList = res.data.data.cartList
                    this.zong = res.data.data.cartTotal.checkedGoodsAmount
                })
            }
        },
        chuan(item) {
            for (let index = 0; index < this.cartList.length; index++) {
                if (this.cartList[index].checked == true) {
                    this.add = true
                } else {
                    if (this.cartList[index].checked == false) {
                        this.add = false
                        break
                    }
                }
            }
            this.id = []
            this.id.push(item.productId)
            checkedss({ productIds: this.id, isChecked: item.checked }).then(res => {
                this.cartList = res.data.data.cartList
                this.zong = res.data.data.cartTotal.checkedGoodsAmount
            })
        },
        compile() {
            this.show = !this.show
            this.yixia = !this.yixia;
            // this.name="完成";
            if (this.yixia) {
                this.name = "编辑";
                this.listname = "结算";
            } else {
                this.name = "完成";
                this.listname = "删除";
            }
        }
    },
    mounted() {
        cart().then(res => {
            if (res.data.errmsg == "请登录") {
                localStorage.removeItem("token")
                localStorage.removeItem("userInfo")
                this.$router.push({
                    path: '/login'
                })
            } else {
                this.zong = res.data.data.cartTotal.checkedGoodsAmount
                this.cartList = res.data.data.cartList
                if (this.cartList.length == 0) {
                    this.cang = true
                    this.yixia = false
                    this.xian = false
                    this.add = false
                }
            }
            for (let index = 0; index < this.cartList.length; index++) {
                if (this.cartList[index].checked == true) {
                    this.add = true
                } else {
                    if (this.cartList[index].checked == false) {
                        this.add = false
                        break
                    }
                }
            }

        })
    }
}
</script>
<style lang="scss">
.cenadd {
    height: 136px;
    width: 100%;
    display: flex;
    // border: 1px solid red;
    background-color: white;
    margin: 0 0 10px;

    .add-left {
        // float: left;
        // border: 1px solid red;
        height: 136px;
        width: 10%;

        .linhe {
            margin-left: 50%;
            transform: translateX(-50%);
            margin-top: 55px;
        }
    }

    .add-center {
        // float: left;
        padding: 7px 0;
        // border: 1px solid red;
        height: 115px;
        width: 75%;

        .add-img {
            float: left;
            height: 100px;
            width: 30%;
            box-sizing: border-box;
            // border: 1px solid red;
        }

        .add-name {
            padding: 4px;
            box-sizing: border-box;
            // border: 1px solid red;
            height: 100px;
            float: left;
            width: 70%;
        }
    }

    .add-right {
        width: 13%;
        margin-left: 5px;
        // float: left;
        // border: 1px solid red;
        height: 136px;
    }
}

.centers {
    height: calc(100vh - 100px);
    background-color: #F2F2F2;
}

.choiceness {
    height: calc(100vh - 50px);
}

.buttomss {
    width: 100%;
    height: 50px;
    background-color: white;
    position: fixed;
    position: fixed;
    bottom: 50px;
}

.abc {
    width: 100%;
    text-align: right;
    background-color: white;
    padding: 10px 0;
}
</style>